<template>
<!--    小区管理  -->
    <div class="com">

<!--        第一排搜索框 -->
        <div class="search">
            <div class="search_name">
                <span>小区名称:</span>
                <input type="text" v-model="searchCommunity.searchName">
            </div>

            <div class="block">
                <span class="demonstration">创建时间:</span>
                <el-date-picker
                        v-model="searchCommunity.createCommunityTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>

            <div class="search_button">
                <el-button type="primary" @click="searchCommunityArr">搜索</el-button>
            </div>
        </div>

<!--        添加小区 按钮 -->
        <div class="addCommuity">
            <!-- Form -->
            <el-button type="primary" @click="dialogFormVisible = true">新增小区</el-button>

        </div>

        <!--        表格 -->
        <el-table :cell-style="rowStyle"
                :data="CommunityData.data.list"
                :header-cell-style="{'background-color':'#409EFF', color:'#fff'}"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    align="center"
                    prop="communityId"
                    label="ID"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="communityName"
                    label="名称"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="communityAddress"
                    label="位置"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="communityUserCount"
                    label="用户数量"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="communityShopCount"
                    label="关联门店"
                    width="">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row)">{{scope.row.communityShopCount}}</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="createTime"
                    label="创建时间"
                    width="">
            </el-table-column>
            <el-table-column
                    align="center"
                    fixed="right"
                    label="操作"
                    width="">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text">查看关联门店</el-button>
                    <el-button type="text" @click="editCommunity(scope.row)">编辑小区</el-button>
                    <el-button type="text" @click="removeCommunity(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

<!--        分页器  -->
        <div class="block">
            <el-pagination @current-change="pageChange" :current-page="page"
                           layout="prev, pager, next"
                           :total="CommunityData.data.total">
            </el-pagination>
        </div>

<!--    弹窗内容   -->
        <div>
<!--            添加小区弹窗内容   -->
            <el-dialog title="新增小区" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="门店名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属地区" :label-width="formLabelWidth">
                        <el-cascader
                                clearable
                                v-model="form.addressValue"
                                :options="addressAll"
                                :props="{value:'label'}">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth">
                        <el-input v-model="form.addressDetail" autocomplete="off" placeholder="请填写详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="门店坐标" :label-width="formLabelWidth">
                        <el-button>获取位置</el-button>
                        <span style="margin-left: 10px">坐标位置为:{{form.positioon}}</span>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCommunity">确 定</el-button>
                </div>
            </el-dialog>

<!--            编辑小区弹窗内容   -->
            <el-dialog title="编辑小区" :visible.sync="dialogEditCommunityVisible">
                <el-form :model="theCommunity">
                    <el-form-item label="门店名称" :label-width="formLabelWidth">
                        <el-input v-model="theCommunity.communityName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属地区" :label-width="formLabelWidth">
                        <el-cascader
                                clearable
                                v-model="addressValue"
                                :options="addressAll"
                                :props="{value:'label'}">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth">
                        <el-input v-model="theCommunity.communityAddress" autocomplete="off" placeholder="请填写详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="门店坐标" :label-width="formLabelWidth">
                        <el-button>获取位置</el-button>
                        <span style="margin-left: 10px">坐标位置为:{{theCommunity.positioon}}</span>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogEditCommunityVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editCommunityValue">确 定</el-button>
                </div>
            </el-dialog>

<!--            查看关联门店弹窗   -->
            <el-dialog title="查看关联门店" :visible.sync="dialogShopCountVisible">
                <el-form>
                    <el-form-item>
                        <el-input v-model="CommunityShopName" autocomplete="off" style="width: 200px;"></el-input>
                        <el-button style="margin-left: 20px" @click="searchShopArr">搜索</el-button>
                        <el-button @click="addShopCount">添加关联门店</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-if="theCommunityShopCount != null" :cell-style="rowStyle"
                          :data="theCommunityShopCount.list"
                          :header-cell-style="{'background-color':'#409EFF', color:'#fff'}"
                          border
                          style="width: 100%">
                    <el-table-column
                            align="center"
                            prop=""
                            label="序号"
                            width="60">
                        <template slot-scope="scope">
                            <el-button type="text">{{scope.$index + 1}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="shopName"
                            label="名称"
                            width="">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="shopId"
                            label="ID"
                            width="">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop=""
                            label="排序"
                            width="">
                        <template slot-scope="scope">
                            <el-input v-model="sortAddCommunityShop" @change="sortForAddShopCount(scope.row.shopId)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="shopAddress"
                            label="地址"
                            width="">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="shopOrderCount"
                            label="订单数量"
                            width="">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            fixed="right"
                            label="操作"
                            width="">
                        <template slot-scope="scope">
                            <el-button type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--        分页器  -->
                <div class="block">
                    <el-pagination @current-change="ShopCountPageChange" :current-page="page"
                                   layout="prev, pager, next"
                                   :total="theCommunityShopCount.total">
                    </el-pagination>
                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogShopCountVisible = false">取 消</el-button>
                    <el-button @click="dialogShopCountVisible = false">确 定</el-button>
                </div>
            </el-dialog>

<!--            添加关联门店弹窗   -->
            <el-dialog title="添加关联门店" :visible.sync="dialogAddShopVisible">
                <el-form>
                    <el-form-item>
                        <el-input v-model="CommunityShopName" autocomplete="off" style="width: 200px;"></el-input>
                        <el-button style="margin-left: 20px" @click="searchAllStore">搜索</el-button>
                    </el-form-item>
                </el-form>

                <el-table :cell-style="rowStyle"
                          :data="shopCountData.list"
                          :header-cell-style="{'background-color':'#409EFF', color:'#fff'}"
                          border
                          style="width: 100%">
                    <el-table-column
                            fixed
                            align="center"
                            prop=""
                            :label="'已选择'+AddCommunityShopIdArr.length"
                            width="100">
                        <template slot-scope="scope">
                            <el-checkbox @change="addShopIdToCommunity(scope.row.shopId)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="shopName"
                            label="名称"
                            width="">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="shopId"
                            label="ID"
                            width="">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop=""
                            label="排序"
                            width="">
                        <template slot-scope="scope">
                            <el-input v-model="sortAddCommunityShop" @change="sortForAddShopCount(scope.row.shopId)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="shopAddress"
                            label="坐标"
                            width="">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="shopOrderCount"
                            label="订单数量"
                            width="">
                    </el-table-column>
                </el-table>

                <!--        分页器  -->
                <div class="block">
                    <el-pagination @current-change="AddShopCountPage" :current-page="page"
                                   layout="prev, pager, next"
                                   :total="shopCountData.total">
                    </el-pagination>
                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogAddShopVisible = false">取 消</el-button>
                    <el-button @click="additionShop">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>

</template>

<script>
    export default {
        name: "CommunityManagement",
        data: function() {
            return {
                CommunityData: {}, // 所有的小区数据
                page: 1, // 页码数 默认为 1
                dialogFormVisible: false, // 是否展示新增小区的弹框 默认为false 不展示
                dialogEditCommunityVisible: false, // 是否展示编辑小区弹框
                dialogShopCountVisible: false, // 是否展示关联门店弹框
                dialogAddShopVisible: false, // 是否展示添加关联门店弹框
                formLabelWidth: '120px', // 弹框内容 文字的宽度
                form: { // 新增小区
                    name: '', // 门店名称
                    addressValue: [], // 所属地区: 省,市,县  选择的
                    addressDetail: '', // 详细地址   写入的
                    position: [],  // 坐标位置
                },
                addressAll: [], // 所有的 省,市,县
                theCommunity: {}, // 进入弹框时,点击的当前的小区对象
                addressValue: [], // 当前小区所属地区: 省,市,县
                positionValue: [], // 当前小区的坐标信息
                theCommunityShopCount: {}, // 某一个小区对应的门店所有数据
                CommunityShopName: "", // 查询时输入的门店名字
                shopCountData: {},  // 所有的门店数据, 添加门店时显示
                AddCommunityShopIdArr: [], // 添加门店时 选中的门店ID数组
                sortAddCommunityShop: '', // 对选择的门店进行排序 输入框中的内容
                searchCommunity: { // 搜索小区内容
                    searchName: '',
                    createCommunityTime: ['',''],
                }
            }
        },
        created() {
            this.getdataSource();
            this.getAllProvinceAndCityList();
        },
        methods: {
            // 获取小区数据
            getdataSource(){
                this.axios.request("community/communityList", {
                    params: {
                        name: "",
                        startTime: "",
                        endTime: "",
                        pageNum: 1,
                        pageSize: 10,
                        communityName: "",
                    }
                }).then((res) => {
                    this.CommunityData = res.data;
                    console.log(this.CommunityData)
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 表格内容居中
            rowStyle(){
                return "text-align: center";
            },
            // 点击页码切换页面数据内容
            pageChange(val){
                // console.log(val)
                this.page = val;
                this.axios.request("community/communityList", {
                    params: {
                        name: "",
                        startTime: "",
                        endTime: "",
                        pageNum: val,
                        pageSize: 10,
                        communityName: "",
                    }
                }).then((res) => {
                    this.CommunityData = res.data;
                }).catch((err) => {
                    console.log(err)
                });
            },
            ShopCountPageChange(val){
                this.page = val;
                this.axios.request("/associatedStores/associatedStoresList", {
                    params: {
                        pageNum: val,
                        pageSize: 6,
                        shopName: '',
                        communityId: this.theCommunity.communityId,
                    }
                }).then((res) => {
                    this.theCommunityShopCount = res.data.data;
                }).catch((err) => {
                    console.log(err)
                });
            },
            AddShopCountPage(val){
                this.page = val;
                this.axios.request("/associatedStores/findShopListByAdd", {
                    params: {
                        pageNum: val,
                        pageSize: 10,
                        shopName: "",
                        communityId: this.theCommunity.communityId,
                    }
                }).then((res) => {
                    this.shopCountData = res.data.data;
                    console.log(this.shopCountData)
                }).catch((err) => {
                    console.log(err)
                });
            },
            //获取省 市 县
            getAllProvinceAndCityList() {
                // 获取全国所有省份和城市的列表
                var that = this;
                this.$http
                    .get("https://restapi.amap.com/v3/config/district", {
                        // 高德地图的API
                        params: {
                            key: "dab57453101d48a50baa5b2088f29e7f", // 这个是申请的 Key，读者自行写入
                            keywords: "中国",
                            subdistrict: 3,
                            extensions: "base",
                        },
                    })
                    .then((response) => {
                        console.log(response.data)
                        for(let i = 0;i<response.data.districts[0].districts.length;i++){
                            let provinceMap = new Map();
                            provinceMap.value = response.data.districts[0].districts[i].adcode;   //区域编号
                            provinceMap.label = response.data.districts[0].districts[i].name;     //省名称
                            provinceMap.children = [];
                            that.addressAll.push(provinceMap);  //添加省份
                            for(let j = 0;j < response.data.districts[0].districts[i].districts.length;j++){
                                let cityMap = new Map()
                                cityMap.value = response.data.districts[0].districts[i].districts[j].adcode;   //区域编号
                                cityMap.label = response.data.districts[0].districts[i].districts[j].name;     //市名称
                                cityMap.children = [];
                                provinceMap.children.push(cityMap); //添加市
                                for(let k = 0;k <response.data.districts[0].districts[i].districts[j].districts.length;k++){
                                    let areaMap = new Map()
                                    areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode;   //区域编号
                                    areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name;     //区县名称
                                    cityMap.children.push(areaMap);   //添加区县
                                }
                            }
                        }
                    });
            },
            // 新增小区, 确定增加按钮
            addCommunity(){
                this.dialogFormVisible = false; // 隐藏弹出框
                let Coordinates = this.form.addressValue[0] + this.form.addressValue[1] + this.form.addressValue[2] + this.form.addressDetail;
                console.log(Coordinates);
                this.axios.post('/community/communityUpdate',{
                    addOrUpdateFlag: 1,
                    communityAddress: this.form.addressDetail,
                    communityAreaCode: "",
                    communityCity: this.form.addressValue[1],
                    communityCoordinates: Coordinates,
                    communityDistrict: this.form.addressValue[2],
                    communityId: '',
                    communityLatitude: "",
                    communityLongitude: "",
                    communityName: this.form.name,
                    communityProvince: this.form.addressValue[0],
                }).then((res)=>{
                    console.log(res.data)
                    this.getdataSource();
                });
                // this.getdataSource();
            },
            // 查看关联门店
            handleClick(row){
                console.log(row)
                this.theCommunity = row;
                this.dialogShopCountVisible = true;
                this.page = 1;
                this.axios.request("/associatedStores/associatedStoresList", {
                    params: {
                        pageNum: 1,
                        pageSize: 5,
                        shopName: "",
                        communityId: row.communityId,
                    }
                }).then((res) => {
                    this.theCommunityShopCount = res.data.data;
                    console.log(this.theCommunityShopCount)
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 编辑小区按钮  获取点击的小区的对象
            editCommunity(row){
                this.theCommunity = row;
                this.dialogEditCommunityVisible = true;// 显示编辑小区弹框
                this.addressValue[0] = this.theCommunity.communityProvince;
                this.addressValue[1] = this.theCommunity.communityCity;
                this.addressValue[2] = this.theCommunity.communityDistrict;
                this.positionValue[0] = this.theCommunity.communityLatitude;
                this.positionValue[1] = this.theCommunity.communityLongitude;
                console.log(this.addressValue)
            },
            // 编辑小区后的确定按钮
            editCommunityValue(){
                this.dialogEditCommunityVisible = false;
                let Coordinates = this.addressValue[0] + this.addressValue[1] + this.addressValue[2] + this.theCommunity.communityAddress;
                console.log(Coordinates);
                this.axios.post('/community/communityUpdate',{
                    addOrUpdateFlag: 2,
                    communityAddress: this.theCommunity.communityAddress,
                    communityAreaCode: this.theCommunity.communityAreaCode,
                    communityCity: this.addressValue[1],
                    communityCoordinates: Coordinates,
                    communityDistrict: this.addressValue[2],
                    communityId: this.theCommunity.communityId,
                    communityLatitude: this.positionValue[0],
                    communityLongitude: this.positionValue[1],
                    communityName: this.theCommunity.communityName,
                    communityProvince: this.addressValue[0],
                    communityShopCount: this.theCommunity.communityShopCount,
                    communityStatus: this.theCommunity.communityStatus,
                    communityUserCount: this.theCommunity.communityUserCount,
                    createTime: this.theCommunity.createTime,
                    distance: this.theCommunity.distance,
                }).then((res)=>{
                    console.log(res.data)
                    this.getdataSource();
                });
            },
            // 添加关联门店
            addShopCount(){
                this.dialogAddShopVisible = true;
                this.page = 1;
                this.axios.request("/associatedStores/findShopListByAdd", {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        shopName: "",
                        communityId: this.theCommunity.communityId,
                    }
                }).then((res) => {
                    this.shopCountData = res.data.data;
                    console.log(this.shopCountData)
                    this.CommunityShopName = '';
                }).catch((err) => {
                    console.log(err)
                });

            },
            // 选择门店 加入小区
            addShopIdToCommunity(shopId){
                let tag = false;
                for(let i in this.AddCommunityShopIdArr){
                    if(this.AddCommunityShopIdArr[i] == shopId){
                        tag = true;
                    }
                }
                if(tag == false || this.AddCommunityShopIdArr.length == 0){
                    this.AddCommunityShopIdArr.push(shopId);
                }
                // this.AddCommunityShopIdArr.push(shopId);
                console.log(this.AddCommunityShopIdArr)
            },
            // 选择门店加入小区时 为添加的门店进行排序
            sortForAddShopCount(row){
                this.addShopIdToCommunity(row);
            },
            // 删除小区
            removeCommunity(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.post('/community/communityRemove',{
                        communityId: row.communityId,
                    }).then((res)=>{
                        console.log(res.data)
                        this.getdataSource();
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 确定添加门店
            additionShop(){
                this.dialogAddShopVisible = false;
                this.dialogShopCountVisible = false;
                this.axios.post('/associatedStores/addAssociatedStores',{
                    fendeShopCommunityList: this.AddCommunityShopIdArr,
                    panghuCommunityId: this.theCommunity.communityId,
                }).then((res)=>{
                    console.log(res.data)
                    this.getdataSource();
                    this.CommunityShopName = '';
                });
                // this.page = 1;
            },
            // 搜索小区
            searchCommunityArr(){
                this.axios.request('/community/communityList', {
                    params:{
                        name: this.searchCommunity.searchName,
                        startTime: this.searchCommunity.createCommunityTime[0],
                        endTime: this.searchCommunity.createCommunityTime[0],
                        pageNum: 1,
                        pageSize: 10,
                        communityName: this.searchCommunity.searchName,
                    }
                }).then((res)=>{
                    this.CommunityData = res.data;
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 查看关联门店的搜索
            searchShopArr(){
                this.axios.request('/associatedStores/associatedStoresList', {
                    params:{
                        pageNum: 1,
                        pageSize: 10,
                        shopName: this.CommunityShopName,
                        communityId: this.theCommunity.communityId,
                    }
                }).then((res)=>{
                    this.theCommunityShopCount = res.data.data;
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 添加关联门店的搜索
            searchAllStore(){
                this.axios.request('/associatedStores/findShopListByAdd', {
                    params:{
                        pageNum: 1,
                        pageSize: 10,
                        shopName: this.CommunityShopName,
                        communityId: this.theCommunity.communityId,
                    }
                }).then((res)=>{
                    this.shopCountData = res.data.data;
                }).catch((err) => {
                    console.log(err)
                });
            },

        },
    }
</script>


<style scoped>

    .com{
        width: 97%;
        /*height: 900px;*/
        padding: 1.5%;
        /*background-color: hotpink;*/
    }
    .search{
        width: 100%;
        height: 50px;
        /*background-color: rebeccapurple;*/
    }
    .search_name{
        float: left;
        height: 50px;
        width: 30%;
    }
    .search_name>span{
        font-size: 18px;
        line-height: 50px;
        margin-right: 10px;
    }
    .search_name>input{
        font-size: 18px;
        width: 60%;
        height: 38px;
        outline: none;
        border: 1px solid #dddddd;
        padding-left: 10px;
        border-radius: 5px;
    }

    .block{
        line-height: 50px;
        float: left;
        /*margin-left: 10px;*/
    }
    .demonstration{
        margin-right: 10px;
    }
    .search_button{
        float: right;
        width: 80px;
        height: 40px;
        font-size: 18px;
        line-height: 45px;
        margin-right: 200px;
        /*padding: 10px;*/
    }
    .addCommuity{
        height: 60px;
        margin-top: 20px;

    }



</style>